<template>
  <div class="flex1 top-item flex-row-center-between pd16 pointer">
    <div class="flex1">
      <div class="flex">
        <span class="mgr20">{{ props.data.dateString }}</span>
        <span>本{{ props.type }}新增故障数</span>
      </div>
      <div class="mgt20 flex-row-center-left">
        <el-link v-if="props.type === '月'" type="primary" @click="toPageFaultList">
          <span class="fs20 bold count mgr10 fs28">{{ props.data.dateCount }}</span>
        </el-link>
        <span v-else class="fs20 bold mgr10 fs28">{{ props.data.dateCount }}</span>
        <span class="grey-text">个</span>
      </div>
    </div>

    <div class="flex-column-right-center">
      <div class="flex">
        <span class="grey-text">环比</span>
        <div v-if="props.data.momRatio?.startsWith('+')" class="up flex-row-center-left">
          <el-icon><CaretTop /></el-icon>
          <span class="fs18 bold">{{ props.data.momRatio }}</span>
        </div>
        <div v-else class="down flex-row-center-left">
          <el-icon><CaretBottom /></el-icon>
          <span class="fs18 bold">{{ props.data.momRatio }}</span>
        </div>
      </div>

      <div v-if="props.type !== '年'" class="mgt30 flex">
        <span class="grey-text">同比</span>
        <div v-if="props.data.yoyBasis?.startsWith('+')" class="up flex-row-center-left">
          <el-icon><CaretTop /></el-icon>
          <span class="fs18 bold">{{ props.data.yoyBasis }}</span>
        </div>
        <div v-else class="down flex-row-center-left">
          <el-icon><CaretBottom /></el-icon>
          <span class="down fs18 bold">{{ props.data.yoyBasis }}</span>
        </div>
      </div>
      <div v-else style="height: 50px"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue'
  import dayjs from 'dayjs'
  import type { GraphData } from '../config'
  import router from '@/router'

  const props = defineProps({
    data: {
      type: Object as PropType<GraphData>,
      default: () => ({})
    },
    type: {
      type: String as PropType<'月' | '季' | '年'>,
      default: '月'
    }
  })

  /**----------------------------methods----------------------------------------------------------------------- */

  const toPageFaultList = () => {
    const [faultDiscoveryStartTime, faultDiscoveryEndTime] = getCurrentMonth()

    router.push({
      path: '/fault/list',
      query: {
        faultDiscoveryStartTime,
        faultDiscoveryEndTime
      }
    })
  }

  const getCurrentMonth = () => {
    const today = new Date()
    const currentMonth = today.getMonth()
    const currentYear = today.getFullYear()
    const faultDiscoveryStartTime = new Date(currentYear, currentMonth, 1)
    const faultDiscoveryEndTime = new Date(currentYear, currentMonth + 1, 0)
    return [dayjs(faultDiscoveryStartTime).format('YYYY-MM-DD'), dayjs(faultDiscoveryEndTime).format('YYYY-MM-DD')]
  }
</script>

<style scoped lang="less">
  .top-item {
    background: #f6f7fb;
    .up {
      color: #d92329;
    }
    .down {
      color: #119c59;
    }
  }
</style>
